<template>
	<view>
		<view class="step">
			<view class="stepItem">
				<text class="stepInfo">预约<br />服务</text>
			</view>
			<text class="dashed"> </text>
			<view class="stepItem">
				<text class="stepInfo">支付<br />订单</text>

			</view>
			<text class="dashed"> </text>
			<view class="stepItem">
				<text class="stepInfo">门店<br />服务</text>

			</view>
		</view>
		<view class="list">
			<uni-list :border="false">
				<uni-list-item :border="false">
					<template v-slot:header>
						<uni-icons style="color: blue; margin-top: 18rpx;" :size="30" type="shop"></uni-icons>
					</template>
					<template v-slot:body>
						<view class="listItemInfo">
							<!-- 店名以及距离内容块 -->
							<view>
								<view style="font-size: 28rpx;">伟业汽车保养厂(人民路店）</view>
								<view style="font-size: 24rpx;">山阳区人民中路32号</view>
							</view>
						</view>

					</template>

				</uni-list-item>
				<uni-list-item class="itemStyle" :border="false">
					<template v-slot:header>
						<uni-icons style="color: blue; margin-top: 18rpx;" :size="30" type="person-filled"></uni-icons>
					</template>
					<template v-slot:body>
						<view class="listItemInfo">
							<!-- 店名以及距离内容块 -->
							<view>
								<view style="font-size: 28rpx; padding-top: 14rpx; display: inline-block;">张三</view>
								<view
									style="font-size: 26rpx;  display: inline-block; position: absolute; right: 60rpx; top: 36rpx;">
									18888888888</view>
							</view>
						</view>

					</template>

				</uni-list-item>
				<uni-list-item class="itemStyle" :border="false" 　link @click="goReservation">
					<template v-slot:header>
						<uni-icons style="color: blue; margin-top: 18rpx;" :size="30" type="calendar"></uni-icons>
					</template>
					<template v-slot:body>
						<view class="listItemInfo">
							<!-- 店名以及距离内容块 -->
							<view>
								<view style="font-size: 28rpx; padding-top: 18rpx; display: inline-block;"
									@click="openDatetimePicker">立即预约</view>
								<buuug7-simple-datetime-picker ref="myPicker" @submit="handleSubmit" :start-year="2000"
									:end-year="2099" :time-init="1688860800000"
									:time-hide="[false, true, true, true, false, false]"
									:time-label="['年', '月', '日', '时', '分', '秒']" />

							</view>
						</view>
					</template>

				</uni-list-item>
				<uni-list-item class="itemStyle" :border="false" 　link>
					<template v-slot:header>
						<!-- <uni-icons style="color: blue; margin-top: 18rpx;" :size="30" type="calendar"></uni-icons> -->
						<img src="/static/mycar.png"
							style="width: 50rpx; height: 50rpx; margin-left: 6rpx; margin-top: 4px;" alt="" />
					</template>
					<template v-slot:body>
						<view class="listItemInfo">
							<!-- 店名以及距离内容块 -->
							<view>
								<view
									style="font-size: 28rpx; padding-top: 8rpx; display: inline-block; margin-left: 6rpx;">
									奔驰FWE4/豫A98FHJ</view>

							</view>
						</view>

					</template>

				</uni-list-item>

				<uni-list-item direction="column" class="itemStyle" :border="false">
					<template v-slot:header>
						<view class="serviceList">
							<view class="inblockView">
								服务产品
							</view>
							<view class="inblockView2">
								共选择<text style="color: blue;">3</text>项服务产品
							</view>
						</view>

					</template>
					<template v-slot:body>
						<view class="serviceItemInfo">
							<view>
								小保养套餐1（合成机油+机滤）<span style="position: absolute; right: 100rpx;">￥ 199</span>
							</view>
							<view>
								小保养套餐1（合成机油+机滤）<span style="position: absolute; right: 100rpx;">￥ 199</span>
							</view>
							<view>
								小保养套餐1（合成机油+机滤）<span style="position: absolute; right: 100rpx;">￥ 199</span>
							</view>
						</view>

					</template>

				</uni-list-item>

				<uni-list-item class="itemStyle" :border="false" 　link>
					<template v-slot:header>
						<!-- <uni-icons style="color: blue; margin-top: 18rpx;" :size="30" type="calendar"></uni-icons> -->
						<img src="/static/coupon.png"
							style="width: 50rpx; height: 50rpx; margin-left: 6rpx;margin-top: 3px;" alt="" />
					</template>
					<template v-slot:body>
						<view class="listItemInfo">
							<!-- 店名以及距离内容块 -->
							<view>
								<view
									style="font-size: 28rpx; padding-top: 8rpx; display: inline-block; margin-left: 6rpx;">
									代金券/优惠券</view>
								<view
									style="font-size: 28rpx; padding-top: 8rpx; display: inline-block; position: absolute; right: 10rpx;">
									暂无</view>

							</view>
						</view>

					</template>

				</uni-list-item>

			</uni-list>
		</view>
		<view class="notes">
			<textarea placeholder="备注信息" placeholder-style="margin-left: 10rpx;"
				style="width: 600rpx; border: 2rpx solid #CCCCCC;" name="notes" id="notes" cols="30"
				rows="10"></textarea>
		</view>

		<view class="bottom">
			<view class="half-block customer">
				<view @click="contactCustomer" class="contact ">
					<img style="height: 48rpx; width: 48rpx;" src="/static/logo.png" alt="" />
					<view class="">
						联系客服
					</view>
				</view>
				<uni-popup ref="contactCustomer" background-color="#fff" type="bottom" border-radius="10px 10px 0 0">
					<view class="popupItem1">
						1889797979879
					</view>
					<view class="popupItem2">
						呼叫
					</view>
					<view @click="closeContactCustomer" class="popupItem3">
						取消
					</view>
				</uni-popup>
				<view class="suminfo">
					<text>合计：</text><text style="color: red;">￥30.50</text>
				</view>
			</view>
			<navigator url="/pages/carMaintenance/orderPayment/orderPayment" @click="pay" class="half-block2 pay">
				<text>提交订单</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
	export default {
		components: {
			'buuug7-simple-datetime-picker': SimpleDateTimePicker
		},
		data() {
			return {
				provider: '',
				birthday: "",
				currentTimestamp: Date.now(),
			}
		},
		methods: {
			// 打开picker并更新时间戳
			openDatetimePicker() {
				this.updateCurrentTimestamp();
				this.$refs.myPicker.show();
			},

			// 更新当前时间戳
			updateCurrentTimestamp() {
				this.currentTimestamp = Date.now();
			},

			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			handleSubmit(e) {
				// {year: "2023", month: "07", day: "11", hour: "15", minute: "21", seconds: '55'}
				this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.seconds}`;
			},
			// //预约时间
			// goReservation() {
			// 	this.$refs.reservation.open('center')
			// },

			// 点击前往联系客服
			contactCustomer() {
				this.$refs.contactCustomer.open('bottom')
			},
			//关闭联系客服弹窗
			closeContactCustomer() {
				this.$refs.contactCustomer.close()
			},
			//支付
			pay() {
				uni.getProvider({
					service: "payment",
					success: (resp) => {
						console.log(resp);
						this.provider = resp.provider
					}
				})
				uni.requestPayment({
					provider: this.provider,
					orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style>
	.step {
		margin: 26rpx auto;
		text-align: center;
	}

	.stepItem {
		border: 1rpx solid #CCCCCC;
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		border-radius: 100%;
		display: inline-block;
		vertical-align: middle;

	}

	.stepInfo {
		display: inline-block;
		line-height: 34rpx;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-left: 5rpx;
	}

	.dashed {
		display: inline-block;
		width: 112rpx;
		height: 0;
		border-top: 2rpx dashed #CCCCCC;
		margin-left: 10rpx;
		margin-right: 10rpx;
		vertical-align: middle;

	}

	/* 订单信息区域 */
	.list {
		padding: 0 38rpx;
		margin-top: 60rpx;
	}

	/deep/ .uni-list-item__container {
		padding-top: 20rpx;
		padding-bottom: 0;
	}

	/deep/.uni-icon-wrapper {
		padding-top: 30rpx;
	}

	/* 列表右侧信息块样式 */
	.listItemInfo {
		margin-left: 10rpx;
	}

	.itemStyle {
		margin-bottom: 20rpx;
	}

	.inblockView {
		display: inline-block;
		font-size: 28rpx;
	}

	.inblockView2 {
		display: inline-block;
		position: absolute;
		font-size: 28rpx;
		right: 36rpx;
	}

	.serviceList {
		padding-left: 30rpx;
	}

	.serviceItemInfo {
		font-size: 4rpx;
		padding-left: 30rpx;
		margin-top: 20rpx;
	}


	/* 备注区域文本 */
	.notes {
		padding: 0 68rpx;
		margin-top: 60rpx;
		margin-bottom: 100rpx;

	}

	/* 底部区域 */
	.bottom {
		bottom: 0;
		height: 100rpx;
		width: 750rpx;
		display: flex;
	}

	.half-block {
		width: 70%;
	}

	.half-block2 {
		width: 30%;
	}

	.customer {
		display: flex;
		justify-content: space-between;
	}

	.suminfo {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		margin-right: 40rpx;
	}

	.pay {
		background-color: red;
		color: white;
		text-align: center;
		line-height: 100rpx;
		border-radius: 10rpx;
	}

	.contact {
		text-align: center;
		padding-left: 10rpx;
	}

	.popupItem1 {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-bottom: 1rpx solid #e6e6e6;
		margin: 0 50rpx;
	}

	.popupItem2 {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-bottom: 1rpx solid #e6e6e6;
		margin: 0 50rpx;
	}

	.popupItem3 {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;

		margin: 0 50rpx;
	}
</style>